<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import UploadImg from "@/components/UploadImg/index.vue";
import { usePublicHooks } from "@/views/hooks";
const { peripheryTypeStyle } = usePublicHooks();
import Site from "~icons/ri/map-pin-fill";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    name: "",
    poiType: "",
    longitude: null,
    latitude: null,
    address: "",
    introduction: "",
    coverImageUrl: null,
    recommendationScore: 1
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-position="left"
    label-width="110px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24" class="mb-3">
        <UploadImg
          v-model:model-value="newFormInline.coverImageUrl"
          :isView="true"
          :width="680"
        />
      </re-col>
      <re-col :value="24" :xs="24" :sm="24" class="mb-3">
        <div class="flex items-center justify-between leading-[1]">
          <div class="flex items-center">
            <IconifyIconOffline class="site" :icon="Site" :size="16" />
            <span class="pl-0.5 font-bold"
              >地址：{{ newFormInline.address }}</span
            >
            <span class="text-[12px] ml-[10px]"
              >(经纬度：{{
                newFormInline.latitude + "-" + newFormInline.longitude
              }})</span
            >
          </div>
          <el-tag :type="peripheryTypeStyle(newFormInline.poiType).style">
            {{ peripheryTypeStyle(newFormInline.poiType).text }}
          </el-tag>
        </div>
      </re-col>

      <!-- <re-col :value="12" :xs="24" :sm="24" class="mb-3">
        <span class="font-bold">排序：</span
        >{{ newFormInline.recommendationScore }}
      </re-col> -->
      <re-col :value="24" :xs="24" :sm="24">
        {{ newFormInline.introduction }}
      </re-col>
    </el-row>
  </el-form>
</template>
